{% extends "static/view/template.html" %}
{% block body %}
<style>
table {
  width: 80%;
  border: 2px solid #D9853B;
  border-radius: 3px;
  background-color: #fff;
}

th {
  background-color: #D9853B;
  color:  #fff;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -user-select: none;
}

td {
  background-color: #f9f9f9;
  word-wrap:break-word;
}

th, td {
  max-width: 120px;
  padding: 10px 20px;
}
</style>
<div id="app">
    <div class="container">
        <div class="page-header">
        </div>

        <div class="page-header">
            <h1> <font color= #333333><center>{{viewname}}</center></font>
                <small><center><font color= #778899></font></center></small>
            </h1>
        </div>
    </div>
    <div id="chart"></div> 
    <view-chart :counterlist.sync="counterlist" 
                :graphtype.sync="graphtype" 
                :interval.sync="interval" 
                :current-value.sync="currentValue" 
                :current-time.sync="currentTime" 
                :stop-flag.sync="stopFlag"
                :info.sync="info"
                :update-slot-func.sync="updateSlotFunc"
                :colorlist.sync="colorlist"
                v-ref:view-chart></view-chart> 
    <div class="container" style="margin-top:20px;">
        <div class="row">
            <div class="col-xs-9"></div>
            <div class="col-xs-3">
                <op-button 
                    :viewname="viewname" 
                    :counterlist="counterlist" 
                    :graphtype="graphtype" 
                    :interval="interval" 
                    :stop-flag.sync="stopFlag"></op-button>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-9">
                <table class="table table-striped">
                    <thead>
                        <tr><th>Counter Name</th><th>Counter Value</th><th>Local Time</th></tr>
                    </thead>
                    <tbody>
                    <tr v-for="counter in counterlist" v-bind:style="{color:colorlist[$index]}">
                            <td>{{counter['label']}}</td>
                            <td>{{currentValue[$index]}}</td>
                            <td>{{currentTime[$index]}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-xs-3">
                <table class="table table-striped">
                    <thead>
                        <tr><th>Base Time</th></tr>
                    </thead>
                    <tbody>
                        <tr><td>{{currentTime[0]}}</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div id="info-modal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Info</h4>
          </div>
          <div class="modal-body">
              {{info}}
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

</div>



<template id="opButton">
<button class="btn btn-info" @click="refresh">Refresh</button>
<button class="btn btn-danger" @click="stop">Stop</button>
</template>

<!--<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.min.js"></script>-->
<script src="js/vue.js"></script>
<script src="js/counterview.js"></script>

{% endblock %}
